<template>
	<view class="c-input-item">

		<u-form-item v-if="type == 'text'" :label="label" :label-style="{whiteSpace:'nowrap' }" :required="required"
		 :right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input @input="handleInput" v-model="getValues" input-align="right" :disabled="disabled" :placeholder="placeholder ? placeholder : '请输入'"
			 :clearable="clearable" />
		</u-form-item>

		<u-form-item v-if="type == 'radio'" :label="label" :label-style="{whiteSpace:'nowrap' }" :required="required"
		 :right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-radio-group @input="handleInput" v-model="getValues">
				<u-radio v-for="(item, index) in options" :key="index" :name="item.value" :disabled="item.disabled" active-color="#54B4F5">
					{{ item.label }}
				</u-radio>
			</u-radio-group>
		</u-form-item>

		<u-form-item v-if="type == 'time'" :label="label" :label-style="{whiteSpace:'nowrap' }" :required="required"
		 :right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="currentValue" type="text" input-align="right" :disabled="true" :clearable="clearable" :placeholder="placeholder ? placeholder : '请选择时间'"
			 @click="time_visible = true" />
			<u-picker @confirm="onConfirmTime" mode="time" v-model="time_visible" :params="{
						year: true,
						month: true,
						day: true,}"></u-picker>
		</u-form-item>

		<u-form-item v-if="type == 'single-select'" :label="label" :label-style="{whiteSpace:'nowrap' }" :required="required"
		 :right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="currentValue" input-align="right" :disabled="true" :clearable="clearable" :placeholder="placeholder ? placeholder : '请选择'"
			 @click="select_visible = true" />
			<u-select @confirm="onConfirmSingle" v-model="select_visible" mode="single-column" :list="options"></u-select>
		</u-form-item>

		<u-form-item v-if="type == 'mutil-auto-select'" :label="label" :label-style="{whiteSpace:'nowrap' }" :required="required"
		 :right-icon="rightIcon ? 'arrow-right' : ''" :prop="name">
			<u-input v-model="currentValue" input-align="right" :disabled="true" :clearable="clearable" :placeholder="placeholder ? placeholder : '请选择'"
			 @click="select_visible = true" />
			<u-select @confirm="onConfirmMutil" v-model="select_visible" mode="mutil-column-auto" :list="options"></u-select>
		</u-form-item>

	</view>

</template>

<script>
	import miment from 'miment'

	export default {
		name: 'u-input-item',
		props: {
			//title
			label: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			// 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
			required: {
				type: Boolean,
				default: false
			},
			rightIcon: {
				type: Boolean,
				default: true
			},
			//表单提交时的key
			name: {
				type: String,
				default: ''
			},
			value: {
				type: Object,
				default () {
					return {}
				}
			},
			clearable: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},

			placeholder: {
				type: String,
				default: ''
			},
			//单选框数据列表
			options: {
				type: Array,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				time_visible: false,
				select_visible: false,
				currentValue: '',
			}
		},
		onLoad() {
			
		},
		
		watch: {
			
		},
		computed: {
			getValues() {
				console.log(this.name)
				console.log(this.$parent.model)
				return this.$parent.model[this.name]
				// return '1111'
			},

		},
		methods: {
			handleInput(value) {
				this.$emit('input', value);
			},

			onConfirmTime(value) {
				let finalValue = Math.floor(new Date().setFullYear(value.year, Number(value.month) - 1, value.day) / 1000);
				let currentValue = this.$u.timeFormat(finalValue)

				this.currentValue = currentValue;
				this.$emit('input', finalValue);
			},
			onConfirmSingle(value) {
				console.log(value)
				this.currentValue = value[0].label;
				this.$emit('input', value[0].value);
			},
			onConfirmMutil(value) {
				let currentValue = '';

				if (value && value.length > 0) {
					value.map((item, index, array) => {
						currentValue += index == array.length - 1 ? item.label : item.label + '/';
					})
				}
				this.currentValue = currentValue;
				this.$emit('input', value);

			},

		}
	}
</script>

<style lang="scss" scoped>
	.c-input-item {
		u-radio-group {
			text-align: right;
			display: flex;
			flex-direction: row-reverse;
		}
	}
</style>
